<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/jquery.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <span>激光码查询:</span>
        <el-input v-model="code" placeholder="请输入激光码" style="width: 280px"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>

        <el-card v-show="dialogFormVisible" class="box-card" style="width: 800px; margin: 80px auto; border-radius: 15px; border-color: #cf9236">
            <div slot="header" >
                <span>激光码信息</span>
            </div>
            <el-descriptions >
                <el-descriptions-item label="您好">您是第{{laserSecurity.queryNumber}}次查询</el-descriptions-item>
                <el-descriptions-item label="产品名称">{{laserSecurity.productName}}</el-descriptions-item>
                <el-descriptions-item label="生产地址">{{laserSecurity.productionAddress}}</el-descriptions-item>
                <el-descriptions-item label="流水">{{laserSecurity.productionName}}</el-descriptions-item>
                <el-descriptions-item label="产品价格">{{laserSecurity.productPrice}}</el-descriptions-item>
            </el-descriptions>
        </el-card>

    </div>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    code:"",
                    laserSecurity:{},
                    dialogFormVisible:false
                }
            },
            methods:{
                search(){
                    if (this.code == null || this.code == ""){
                        this.$message({
                            message: '请输入激光码',
                            type: 'warning'
                        });
                        this.dialogFormVisible = false;
                    }else {
                        axios.get("/laserSecurity?code=" + this.code)
                            .then(res => {
                                this.laserSecurity = res.data;
                                if (this.laserSecurity == ''){
                                    this.$message.error("激光码错误");
                                    this.dialogFormVisible = false;
                                } else {
                                    this.dialogFormVisible = true;
                                }

                            })
                    }
                }
            }
        })
    </script>
</body>
</html>